<template>
    <div class="brand-container">
        <!-- 顶部操作栏 -->
        <div class="top-bar">
            <div class="filter-area">
                <label>类别:</label>
                <el-select v-model="size" placeholder="请选择类别" style="width: 120px; margin-right: 10px;">
                    <el-option label="250ml" value="3" />
                    <el-option label="120ml" value="1" />
                </el-select>

                <el-input v-model="searchKeyword" placeholder="输入类别名称查询" style="width: 200px; margin-right: 10px;" />
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </div>

            <div class="action-buttons">
                <el-button type="primary" @click="openAddDialog">新增</el-button>
                <el-button @click="refreshData">刷新</el-button>
            </div>
        </div>

        <!-- 规格列表 -->
        <el-table :data="filteredBrands" border style="width: 100%">
            <el-table-column label="操作" width="120">
                <template #default="{ row }">
                    <el-button size="small" @click="editBrand(row)">
                        <el-icon><Edit /></el-icon>
                    </el-button>
                    <el-button size="small"  @click="deleteBrand(row)">
                        <el-icon><Delete /></el-icon>
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column prop="name" label="属性" width="300">
                <template #default="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑规格弹窗 -->
        <el-dialog v-model="dialogVisible" :title="isEditing ? '编辑规格' : '新增规格'" width="400px" @close="resetForm">
            <div class="dialog-form">
                <div class="form-item">
                    <label class="label">*规格名称:</label>
                    <el-input v-model="formData.name" placeholder="请输入规格名称" />
                </div>
            </div>

            <template #footer>
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="saveBrand">
                    {{ isEditing ? '更新' : '保存' }}
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 数据列表
const brands = ref([
    { id: 1, name: '120ml' },
    { id: 2, name: '180g*12' },
    { id: 3, name: '250ml' }
])

const size = ref('')
const searchKeyword = ref('')

// 过滤后的规格列表
const filteredBrands = computed(() => {
    return brands.value.filter(item =>
        item.name.includes(searchKeyword.value)
    )
})

// 弹窗控制
const dialogVisible = ref(false)
const isEditing = ref(false)
const editingId = ref(null)

// 表单数据
const formData = ref({ name: '' })

// 打开新增弹窗
const openAddDialog = () => {
    isEditing.value = false
    formData.value.name = ''
    editingId.value = null
    dialogVisible.value = true
}

// 编辑规格
const editBrand = (row) => {
    isEditing.value = true
    formData.value.name = row.name
    editingId.value = row.id
    dialogVisible.value = true
}

// 删除规格
const deleteBrand = (row) => {
    ElMessageBox.confirm(`确定要删除规格 "${row.name}" 吗？`, '警告', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        brands.value = brands.value.filter(item => item.id !== row.id)
        ElMessage.success('删除成功')
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

// 重置表单
const resetForm = () => {
    formData.value.name = ''
    isEditing.value = false
    editingId.value = null
}

// 查询
const handleSearch = () => {
}

// 刷新数据
const refreshData = () => {
    ElMessage.success('数据已刷新')
}

// 保存规格
const saveBrand = () => {
    if (!formData.value.name.trim()) {
        ElMessage.error('请输入品牌名称')
        return
    }

    if (isEditing.value) {
        // 更新
        const index = brands.value.findIndex(item => item.id === editingId.value)
        if (index > -1) {
            brands.value[index].name = formData.value.name
        }
        ElMessage.success('品牌更新成功')
    } else {
        // 新增
        brands.value.push({
            id: Date.now(),
            name: formData.value.name
        })
        ElMessage.success('品牌添加成功')
    }

    dialogVisible.value = false
}
</script>

<style scoped>
.brand-container {
    padding: 20px;
    background-color: #fff;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filter-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.el-table {
    margin-top: 10px;
}

/* 操作按钮样式 */
.el-button--small {
    padding: 5px 8px;
    font-size: 12px;
}

.dialog-form {
    padding: 20px;
    font-size: 14px;
}

.form-item {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    width: 100px;
    text-align: right;
    color: #333;
}

.el-input {
    flex: 1;
    max-width: 200px;
}
</style>